<template>
  <div>
    <!-- 查询天气 -->
    <el-card shadow="always">
      <div class="title">
        <span />
        <p>查询条件</p>
      </div>

      <el-form :model="seachForm" label-width="120px">
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item label="城市：">
              <el-input
                v-model="seachForm.city"
                placeholder="请输入不带市的城市名称（如：天津，北京，郑州）"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24" style="text-align: right">
            <el-button type="primary" @click="getInit">查询</el-button>
            <el-button>重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="always" style="margin-top: 10px">
      <div class="title">
        <span />
        <p>数据列表</p>
      </div>

      <el-table v-loading="loading" :data="dataList">
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        />

        <el-table-column
          prop="date"
          label="日期"
          align="center"
          width="120"
        />
        <el-table-column
          prop="tem1"
          label="最高气温"
          align="center"
          width="120"
        />
        <el-table-column
          prop="tem2"
          label="最低气温"
          align="center"
          width="120"
        />

        <el-table-column
          prop="wea"
          label="天气"
          align="center"
          width="120"
        />

        <el-table-column
          prop="win"
          label="风向"
          align="center"
          width="120"
        />

        <el-table-column
          prop="sunrise"
          label="日出时间"
          align="center"
          width="120"
        />

        <el-table-column
          prop="sunset"
          label="日落时间"
          align="center"
          width="120"
        />

        <el-table-column
          prop="narrative"
          label="预测预警"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="analyse(scope.row)">分析</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 预测气温 -->
    <el-dialog
      :visible.sync="isShowAnalyse"
      title="分析"
      @close="isShowAnalyse = false"
    >
      <div style="width: 100%" class="analyseBox">
        <p>
          <span>日期</span><span>{{ analyseObj.date }}</span>
        </p>
        <p>
          <span>星期</span><span>{{ analyseObj.week }}</span>
        </p>
        <p>
          <span>天气</span><span>{{ analyseObj.wea }}</span>
        </p>
        <p>
          <span>低温</span><span>{{ analyseObj.tem1 }}℃</span>
        </p>
        <p>
          <span>高温</span><span>{{ analyseObj.tem2 }}℃</span>
        </p>
        <p>
          <span>湿度</span><span>{{ analyseObj.humidity }}</span>
        </p>
        <p>
          <span>可见度</span><span>{{ analyseObj.visibility }}km</span>
        </p>
        <p>
          <span>压力</span><span>{{ analyseObj.pressure }}百帕斯卡</span>
        </p>
        <p>
          <span>风向</span><span>{{ analyseObj.win[0] }} - {{ analyseObj.win[1] }}</span>
        </p>
        <p>
          <span>风级</span><span>{{ analyseObj.win_speed }}</span>
        </p>
        <p>
          <span>风速</span><span>{{ analyseObj.win_meter }}</span>
        </p>
        <p>
          <span>日出时间</span><span>上午{{ analyseObj.sunrise }}</span>
        </p>
        <p>
          <span>日落时间</span><span>下午{{ analyseObj.sunset }}</span>
        </p>
        <p>
          <span>空气质量</span><span>{{ analyseObj.air_level }}</span>
        </p>
        <p>
          <span>其他地区</span><span>{{ analyseObj.phrase }}</span>
        </p>
        <p>
          <span>分析总结</span><span>{{ analyseObj.narrative }}</span>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getQueryCityWeather } from '@/api/weather'
export default {
  data() {
    return {
      loading: false,
      dataList: [],
      seachForm: {
        city: ''
      },
      isShowAnalyse: false,
      analyseObj: {
        win: ['', '']
      }
    }
  },

  mounted() {
    this.getInit()
  },

  methods: {
    async getInit() {
      this.loading = true
      const result = await getQueryCityWeather({ city: this.seachForm.city })
      if (result.code == 20000) {
        this.dataList = result.data
      }
      this.loading = false
    },

    analyse(item) {
      console.log(item, 'item')

      this.isShowAnalyse = true
      this.analyseObj = item
    }
  }
}
</script>

<style scoped>
.title {
  width: 100%;
  display: flex;
  align-items: center;
}

.title span {
  width: 6px;
  height: 20px;
  display: inline-block;
  background: #42b983;
  border-radius: 10px;
  margin-right: 10px;
}

.title p {
  font-size: 14px;
  color: #333;
}

.analyseBox {
  width: 100px;
}

.analyseBox p {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.analyseBox p span:nth-child(1) {
  display: inline-block;
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #42b983;
  color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.analyseBox p span:nth-child(2) {
  display: inline-block;
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #42b983;
  border-right: 1px solid #42b983;
  border-bottom: 1px solid #42b983;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
</style>
